<template>
  <app-dialog v-model="show" width="1000px" title="盘口" @open="handleOpen">
    <div class="title">不玩哪些盘口</div>

    <el-tabs v-model="type">
      <el-tab-pane :label="optionItem.name" :name="optionItem.name" v-for="optionItem in options">
        <el-scrollbar height="380px">
          <template v-if="optionItem.name == '热门'">
            <PkHot v-model="hot" />
          </template>
          <template v-if="optionItem.name == '盘口类型'">
            <PlacePk v-model="noplacepktype" />
          </template>

          <PkBase
            v-else
            v-for="item in optionItem.matchs"
            :types="optionItem.types"
            :title="item.label"
            v-model="item.values"
            :code="item.code"
          />
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>

    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </app-dialog>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import { http } from '@/utils/http'
import PkHot from './PkHot.vue'
import PkBase from './PkBase.vue'
import PlacePk from "./PlacePk.vue";


const show = defineModel({ type: Boolean })
const emits = defineEmits(['change'])
const props = defineProps({
  data: Object,
})

const type = ref('热门')
const hot = ref([])
const options = ref([])

const noplacepktype = ref([])

const handleOpen = () => {
}



onMounted(() => {
  const no_place_pk_key = props.data.no_place_pk_key
  
  noplacepktype.value = props.data.no_place_pk_type
  hot.value = no_place_pk_key.hot || []

  options.value = [
    {
      name: '热门',
    },
    {
      name: '让球大小',
      type: 'other',
      types: [
        { label: '让球', code: 'R' },
        { label: '进球：大/小', code: 'OU' },
      ],
      matchs: [
        { label: '全场', code: 'full', values: [] },
        { label: '上半场', code: 'half', values: [] },
      ],
    },
    {
      name: '角球',
      type: 'corner',
      types: [
        { label: '让球', code: 'R' },
        { label: '进球：大/小', code: 'OU' },
      ],
      matchs: [
        { label: '全场', code: 'C:full', values: [] },
        { label: '上半场', code: 'C:half', values: [] },
      ],
    },
    {
      name: '盘口类型',
    },
  ]

  options.value.forEach(item => {
    if (!item.type) return

    item.matchs?.forEach(match => {
      const values = []

      no_place_pk_key[item.type]?.map(item => {
        if (item.indexOf(match.code) == 0) values.push(item)
      })

      match.values = values
    })
  })
})

const handleClose = () => (show.value = false)

const handleSubmit = () => {
  let no_place_pk_key = {
    hot: hot.value,
  }

  options.value.forEach(item => {
    if (!item.type) return
    if (!no_place_pk_key[item.type]) no_place_pk_key[item.type] = []

    item.matchs?.forEach(option => {
      if (option.values.length) {
        no_place_pk_key[item.type] = no_place_pk_key[item.type].concat(option.values)
      }
    })
  })

  let a = JSON.parse(JSON.stringify(props.data))
  let body = {
    status: a.status,
    id: a.id,
    login_rule_id: a.login_rule.id,
    group_id: a.group.id,
    source_id: a.source.id,
    money_code: a.money.money_code,
    proxy_ip_id: a.proxy_ip.id,
    user_name: a.user_name,
    pass_word: a.pass_word,
    percent: a.percent,
    remark: a.remark,
    bc_type: a.bc_type,
    amount: a.amount,
    place_league: a.place_league,
    place_pk_key_amount: a.place_pk_key_amount,
    no_place_pk_key: no_place_pk_key,
    no_place_pk_type: noplacepktype.value,
    place_order_stakes: a.place_order_stakes,
    login_status: a.login_status,
  }
  
  http.post('/member/member_update', body).then(res => {
      ElMessage.success('操作成功')
      handleClose()
      emits('change')
    })
}
</script>
<style lang="scss" scoped>
.title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #252a30;
}
</style>
